<template>
	<view v-if="showPopup" class="uni-popup">
		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
			<view class="uni-popup__wrapper-box" @click.stop="clear">
				<view class="invite-popup">
					<view class="invite-info">
						<view class="anchor-wrap">
							<image class="avatar" :src="inviteInfo.anchor.avatar" mode=""></image>
							<view class="user-info">
								<view class="name">{{inviteInfo.anchor.name}}</view>
								<view class="info">
									<image src="/static/img/anchor_icon.png" mode=""></image>
									<text>红娘</text>
								</view>
							</view>
						</view>
						<view class="audience-wrap">
							<image class="avatar" :src="inviteInfo.audience.avatar" mode=""></image>
							<view v-if="inviteInfo.audience.id != ''" class="user-info">
								<view class="name">{{inviteInfo.audience.name}}</view>
								<view class="info">
									<text class="age">{{inviteInfo.audience.age}}</text>
									<text class="city">{{inviteInfo.audience.city}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="invite-intro">
						<text class="title">红娘邀请您专属相亲</text>
						<text class="intro">20米币(每分钟)</text>
					</view>
					<view class="btn-wrap">
						<view class="cancel" @click="cancel">取消</view>
						<view class="enter" @click="enter">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'InvitePopup',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: true
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: false
			},
			show: {
				type: Boolean,
				default: true
			},
			inviteInfo: {
				type: Object,
				default() {
					return {
						roomid: -1,
						type: '',
						anchor: {
							id: '',
							name: '',
							avatar: ''
						},
						audience: {
							id: '',
							name: '',
							avatar: '',
							age: '',
							city: ''
						}
					};
				}
			}
		},
		data() {
			return {
				ani: '',
				showPopup: false,
				userInfo: {}
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {
			uni.getStorage({
				key: 'user_info',
				success: res => {
					this.userInfo = res.data;
				}
			});
		},
		methods: {
			clear() {},
			
			open() {
				this.$emit('change', {
					show: true
				})
				this.showPopup = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'uni-' + this.type
					}, 30)
				})
			},
			
			close(type) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
			},
			
			cancel() {
				this.$emit('cancel', {
					show: 'inviteCancel'
				})
			},
			
			enter() {
				this.$emit('enter', {
					show: 'inviteEnter'
				})
			},
			
		}
	}
</script>
<style lang="scss">
	@charset "UTF-8";

	.uni-popup {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		overflow: hidden
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .4);
		opacity: 0
	}

	.uni-popup__mask.ani {
		transition: all .3s
	}

	.uni-popup__mask.uni-bottom,
	.uni-popup__mask.uni-center,
	.uni-popup__mask.uni-top {
		opacity: 1
	}

	.uni-popup__wrapper {
		position: absolute;
		z-index: 999;
		box-sizing: border-box
	}

	.uni-popup__wrapper.ani {
		transition: all .3s
	}

	.uni-popup__wrapper.top {
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%)
	}

	.uni-popup__wrapper.bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.uni-popup__wrapper.center {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0
	}

	.uni-popup__wrapper-box {
		position: relative;
		box-sizing: border-box
	}

	.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		padding: 30upx;
		background: #fff
	}

	.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		position: relative;
		max-width: 80%;
		max-height: 80%;
		overflow-y: scroll
	}

	.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
	.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
		width: 100%;
		max-height: 500px;
		overflow-y: scroll
	}

	.uni-popup__wrapper.uni-bottom,
	.uni-popup__wrapper.uni-top {
		transform: translateY(0)
	}

	.uni-popup__wrapper.uni-center {
		transform: scale(1);
		opacity: 1
	}
	
	/* 邀请弹窗 */
	.invite-popup {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		.invite-info {
			display: flex;
			justify-content: center;
			align-items: center;
			.anchor-wrap {
				width: 300rpx;
				height: 300rpx;
				position: relative;
				.avatar {
					border-radius: 10rpx 0 0 0;
				}
				.user-info {
					.info {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 3rpx 20rpx;
						background-color: #ED4574;
						border-radius: 20px;
						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 5rpx;
						}
						text {
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
				}
			}
			.audience-wrap {
				width: 300rpx;
				height: 300rpx;
				position: relative;
				.avatar {
					border-radius: 0 10rpx 0 0;
				}
			}
			.avatar {
				display: block;
				width: 300rpx;
				height: 300rpx;
			}
			.user-info {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				width: 300rpx;
				height: 100rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
				position: absolute;
				left: 0;
				bottom: 0;
				.name {
					font-size: 30rpx;
					color: #FFFFFF;
				}
				.info {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
		.invite-intro {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			.title {
				font-size: 36rpx;
				color: #333333;
			}
			.intro {
				font-size: 24rpx;
				color: #666666;
			}
		}
		.btn-wrap {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx;
			.cancel {
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 40rpx;
				font-size: 30rpx;
				border: 1rpx solid #666666;
				color: #666666;
				border-radius: 60rpx;
			}
			.enter {
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 40rpx;
				font-size: 30rpx;
				border: 1rpx solid #ED4574;
				background-color: #ED4574;
				color: #FFFFFF;
				border-radius: 60rpx;
			}
		}
	}
</style>